import React,{Component} from 'react';
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {Button, Modal, Input, Form,Icon,Layout,Menu,Popconfirm} from 'antd'
import MenuItem from 'antd/lib/menu/MenuItem';
import './AdminDoccatalog.less'

const { Header, Content, Footer, Sider } = Layout;
const {SubMenu}=Menu;
@connect(state=>({
    
})
)
class AdminDoccatalog extends Component{
   constructor(props){
       super(props);
       this.state={
           display:"none",
           mdcode:"### 标题",
           showAddmdModal:false
       }
   }
   click=({item,key,keyPath,domEvent})=>{
       //console.log(item)
       this.setState({
           display:"block"
       })
   }
   addDocmdOk=()=>{
       this.setState({
        showAddmdModal:false
       })
   }
   addDocmdCancel=()=>{
    this.setState({
        showAddmdModal:false
       })
   }
   addmd=()=>{
       this.setState({
        showAddmdModal:true
       })
   }
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
           
            <Layout style={{ minHeight: '10vh' }}>
            <Sider className="sider">
              <Menu mode="inline" onClick={this.click}>
                <SubMenu title="jieba分词1.0" >
                    <Menu.Item >简介</Menu.Item>
                    <Menu.Item>价格</Menu.Item>
                    <Menu.Item>使用方法</Menu.Item>
                    <Button type="dashed" className="add" onClick={this.addmd}>添加MD</Button>
                </SubMenu>
                <SubMenu title="jieba分词2.0">
                    <Menu.Item>简介</Menu.Item>
                    <Menu.Item>调用方式</Menu.Item>
                    <Button type="dashed" className="add" onClick={this.addmd}>添加MD</Button>
                </SubMenu>
                <SubMenu title="jieba分词3.0">
                    <Menu.Item>简介</Menu.Item>
                    <Menu.Item>快速入口</Menu.Item>
                    <Button type="dashed" className="add" onClick={this.addmd}>添加MD</Button>
                </SubMenu>
                
            </Menu>
            </Sider>          
               <Content className="md" style={{ margin: '0 16px' }}>
                                    
        <div style={{ padding: 12, background: '#fff', minHeight: 360 }}>{this.state.mdcode}
        <div className="compile" style={{display:this.state.display}}>
                            <Popconfirm
                                title="确认删除吗？"
                                cancelText="取消"
                                okText="确认"
                            >
                                <Icon className="delete" type="delete" style={{color:"#D94A18"}} ></Icon>
                            </Popconfirm>
                            <Link to={{pathname:'/admin/docedit/',state :  this.state.mdcode }}>{/**将mdcode传递给编辑界面 */}
                                    <Icon className="editico" type="edit"  ></Icon>
                            </Link>
                        </div>  
            
        
        </div>
       
               </Content>
  
               <Modal
                 visible={this.state.showAddmdModal}
                 title="添加md"  
                 onOk={this.addDocmdOk}
                 onCancel={this.addDocmdCancel}
                 okText='确定'
                 cancelText='取消'
               >
                <Form>
                    <Form.Item>
                         {getFieldDecorator('md_id', {
                            rules: [{ required: true, message: '请输入要添加的MD的id!' }],
                            })(
                                <Input placeholder="ID" />
                            )}
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator('md_name', {
                                     rules: [{ required: true, message: '请输入要添加的MD名称!' }],
                                })(
                                    <Input placeholder="名称" />
                                )}
                    </Form.Item>
                </Form>

            </Modal>
    
          </Layout>    
          
        )
    }
}
export default Form.create()(AdminDoccatalog)